import 'babel-polyfill';
import React from 'react';
import $ from 'jquery';
import Header from '../../components/header';
import SideNav from '../../components/sideNav';
import Content from '../../components/content';
import {connect} from 'react-redux';
import { changePage, getUser } from '../../store/actions'

require('../../../css/board');

function sideNavResize(){
    let _wH = $(window).height(),
        _hH = $('#headerWrap').height(),
        _fH = 0;
    $('#navWrap').css({
        'height':(_wH - _hH - _fH)+'px'
    });
    $('#contentWrap').css({
        'height':(_wH - _hH - _fH)+'px',
        overflow:'auto'
    });
    if($('#_mask').size() > 0){
        $('#_mask').css({
            'height':(_wH - _hH - _fH)+'px'
        })
    }
}
class Board extends React.Component{
    constructor(props){
        super(props);
        if(this.props._pages.current < 0)
            this.props._pages.current = 0;
        this.state = {
            title:this.props._pages.pages[this.props._pages.current].name
        };
        this.handleJump = this.handleJump.bind(this)
    }
    static contextTypes = {
        router: React.PropTypes.object
    };
    componentWillMount(){
        /*
        * store中默认就有user信息，但是token是空字符串
        * 如果user信息里的token是空字符串，那么认为用户刷新过页面，store的内容被清空过或者并未登录
        *   此时检查本地缓存的user属性
        *       如果存在，则将user属性的值作为user信息分发到内存
        *       如果不存在，在跳转至登录界面
        * */
        if(window.sessionStorage){
            const session_user_data = window.sessionStorage.getItem('user'),
              _info =JSON.parse(session_user_data);
            if(this.props.user.accessToken == '' && _info){
                this.props.dispatch(getUser({content:_info}));
                if(_info.user.username == 'systemadmin'){
                    this.context.router.push('/_admin')
                }else if(_info.user.type !== 2){
                    return
                }else{
                    this.context.router.push('/work-board')
                }
            }
        }else{this.context.router.push('/login');}
    }
    handleJump(uri){
        this.props.dispatch(changePage(uri));
    }
    componentWillReceiveProps(n){
        if(n._pages.current < 0)
            n._pages.current = 0;
        this.setState({
            title:n._pages.pages[n._pages.current].name,
            user:n.user
        })
    }
    componentDidMount(){
        sideNavResize();
        $(window).resize(function(){
            sideNavResize()
        });
    }
    render(){
        const uri = this.props.location.pathname;
        const _reg = /\w+\-\w+|\w+/;
        const _uri= uri.match(_reg)[0];
        return(
            <div id="board">
                <div id="headerWrap">
                    <Header _r = {this.context.router} user={this.props.user} title={this.state.title} />
                </div>
                <div id="navWrap">
                    <SideNav _r = {this.context.router} jump={this.handleJump} pages={this.props._pages} current={_uri} user={this.props.user} />
                </div>
                <div id="contentWrap">
                    <Content title={this.state.title} user={this.state.user}>
                        {this.props.children}
                    </Content>
                </div>
                {/*<div id="footerWrap">
                    Copyright &copy; 亿阳集团 版权所有 地址：北京市海淀区杏石口路99号A座
                </div>*/}
            </div>
        )
    }
}
function mapStateToProps(state){
    const {_pages,user} = state.rootReducer;
    return {_pages,user}
}
export default connect(mapStateToProps)(Board)